<template>
	<div id="orgEvaluate_index">
		<div class="title"> 用户评价</div>
		<div class="table-data">
			<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
				<el-form-item label="网点选择：">
					<el-select v-model="formInline.website" placeholder="全部" class="custom-select" style="width: 200px;" clearable>
						<el-option v-for="(item,index) in websiteArr" :key="index" :label="item.latticename" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="评价结果：">
					<el-select clearable v-model="formInline.evaluationresult" placeholder="全部" class="custom-select" @change="currentSel($event)">
						<el-option v-for="(item,index) in evaluateArr" :key="index" :label="item.name" :value="item.code" ></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="办理业务：">
					<el-select clearable v-model="formInline.businesstype" placeholder="全部" class="custom-select" style="margin-right: 20px;">
						<el-option v-for="(item,index) in bussinesstypeArr" :key="index" :label="item.businessname" :value="item.businessname" ></el-option>
					</el-select>
					<!-- <el-select clearable v-model="formInline.businesstype" placeholder="全部" class="custom-select" style="margin-right: 20px;">
						<el-option v-for="(item,index) in bussinesstypeArr" :key="index" :label="item.businessname" :value="item.id" ></el-option>
					</el-select> -->
				</el-form-item>
				<el-form-item>
					<el-button class="custom-btn" type="primary" size="medium" @click="submitForm('formInline')">查询</el-button>
					<el-button class="custom-btn" size="medium" @click="resetForm('formInline')">重置</el-button>
				</el-form-item>
			</el-form>
			<!-- tableData.slice((currentPage-1)*pageSize,currentPage*pageSize) -->
			<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"  class="e-table">
				<el-table-column  label="序号" width="90" align="center">
					<template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span></template>
				</el-table-column>
				<el-table-column prop="name" label="评价结果" column-key="name" width="180" align="center">
					<template slot-scope="scope">
						<span :class="{red: scope.row.name === '不满意', blue: scope.row.name === '非常满意',yellow: scope.row.name === '一般'}">
							{{scope.row.name}}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="latticeName" label="网点名称" align="center"></el-table-column>
				<el-table-column prop="businessName" label="办理业务 " align="center"></el-table-column>
				<el-table-column prop="evaluationTime" label="评价时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<img style="cursor:pointer;" src="../assets/img/operation.png" alt="" @click="handleClick(scope.row.id)">
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
			 :page-size="pageSize" :page-sizes="[1, 2, 3, 4]" layout="prev, pager, next" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import { orgEvaluate,orgEvaluateSearch } from "../api/getData"
	export default {
		name: "orgEvaluateIndex",
		data() {
			return {
				formInline: {
					evaluationresult: "",
					businesstype: "",
					website: ""
				},
				evaluateArr:[],
				bussinesstypeArr:[],
				websiteArr:[],
				currentPage: 1,
				pageSize: 10,
				tableData: [],
				selVal:''
			};
		},
		created() {
			// this.getTableDta()
		}, // 创建时
		beforeMount() {}, // 挂载之前
		mounted() {
			this.getFilter()
		}, // 挂载之后
		beforeUpdate() {}, // 数据更新时调用,在渲染之前
		updated() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed() {}, // 实例销毁后调用
		beforeRouteEnter(to, from, next){
			next(vm=>{
				console.log(vm)
				// 每次进入路由执行
				// vm.getTableDta()
				vm.submitForm('formInline')
			})
		},
		methods: {
			currentSel(selVal){
				console.log(selVal)
				this.selVal = selVal;
			},
			// 查询
			submitForm(formName) {
				console.log(this.formInline)
				orgEvaluate({
					businesstypeid:this.formInline.businesstype,
					latticeid:this.formInline.website,
					evaluationHierarchy:this.formInline.evaluationresult
				}).then((res) =>{
					console.log(res)
					if(res.data.code === 0){
						this.currentPage = 1
						this.tableData = res.data.data
					}else{
						this.tableData = []
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 重置
			resetForm(formName) {
				this.formInline.evaluationresult = "";
				this.formInline.businesstype = "";
				this.formInline.website = "";
			},
			handleSizeChange(size) {
				console.log(this.pageSize)
				this.pageSize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			// 获取查询条件
			getFilter(){
				orgEvaluateSearch({}).then((res) =>{
					console.log(res.data,"获取查询条件")
					if(res.data.code === 0){
						this.evaluateArr = res.data.data.setevaluation
						this.bussinesstypeArr = res.data.data.business
						this.websiteArr = res.data.data.lattice
					}else{
						this.evaluateArr = []
						this.bussinesstypeArr = []
						this.websiteArr = []
					}
					
				}).catch((error) =>{
					console.log(error)
				})
			},
			
			// 获取列表数据
			getTableDta() {
				orgEvaluate({
					businesstypeid:'',
					latticeid:'',
					evaluationHierarchy:'',
				}).then((res) => {
					console.log(res)
					if(res.data.code === 0){
						this.tableData = res.data.data;
					}else{
						this.tableData = []
					}
					
				}).catch((error) => {
					console.log(error)
				})
			},
			// 跳转详情页
			handleClick(id){
				console.log(id)
				this.$router.push({
					path:'/orgEvaluate/orgEvaluateDetail',
					query:{
						id:id
					}
				})
			}
		}
	};
</script>
<style lang='scss'>
	#orgEvaluate_index {
		.red {
			color: #FD3B38;
		}

		.blue {
			color: #328EF9
		}

		.yellow {
			color: #FB8F25;
		}

		.title {
			height: 64px;
			line-height: 64px;
			background: #fff;
			overflow: hidden;
			text-align: left;
			padding-left: 20px;
			color: #333437;
			font-size: 16px;
		}

		.table-data {
			width: 100%;
			height: 100%;
			margin-top: 20px;
			text-align: left;
			padding: 20px 30px;
			background: #fff;

			.custom-select {
				width: 128px;
				height: 32px;
				margin-right: 40px;
			}

			.e-table {
				width: 100%;
			}
		}

		.el-table th,
		.el-table tr thead {
			background: #fafafa;
			color: #333;
			font-weight: bold;
		}

		.el-pagination {
			text-align: center;
			margin-top: 40px;

			.el-pager li,
			.btn-next,
			.btn-prev {
				width: 32px;
				height: 32px;
				line-height: 32px;
				background: transparent;
				border: 1px solid #d9d9d9;
			}

			.el-pager li:not(.disabled).active {
				background: #328ef9;
			}
		}
	}
</style>
